<template>
  <div>
    <!-- 轮播图 -->
    <div id="carouselExampleFade" class="carousel slide carousel-fade" data-ride="carousel">
      <div class="carousel-inner">
        <div  v-for="(key,val) in lun" :class="key.clas" :key="val">
          <img :src='key.img' class="d-block w-100" alt="" height="700">
        </div>
      </div>
      <a class="carousel-control-prev" href="#carouselExampleFade" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
        <span class="sr-only">Previous</span>
      </a>
      <a class="carousel-control-next" href="#carouselExampleFade" data-slide="next">
        <span class="carousel-control-next-icon"></span>
        <span class="sr-only">Next</span>
      </a>
    </div>
    <!-- 信息 -->
    <div class="ddv">
      <div class="container-fluid">
        <div class="row justify-content-md-center" id="row">
          <div class="col-lg-2 col-md-4">
            <img src="img/3.png" class="card-img-top" alt="">
            <div class="card-body card-one">
              <p class="card-text">良好的就餐环境，舒适的灯光的照射，独立的就餐环境，有助于人放松心情，舒缓一天不愉快的事情，使人感到家的温暖。</p>
            </div>
          </div>
          <div class="col-lg-2 col-md-4">
            <div class="card-body card-two">
              <p class="card-text">客厅——一个与别人往来的重要的场所，大大的落地窗增加了房屋的采光效果，在夜晚也可以通过窗户看外面的夜景。</p>
            </div>
            <img src="img/8.png" class="card-img-top" alt="">
          </div>
          <div class="col-lg-2 col-md-4">
            <img src="img/9.png" class="card-img-top" alt="">
            <div class="card-body card-three">
              <p class="card-text">卧室——私人的场所，布置成自己喜欢的模样，当然这张照片只是一张实例，我们会根据客户的需求来设计卧室的结构风格。</p>
            </div>
          </div>
          <div class="col-lg-2 col-md-8" style="background-color: #ff9bc1">
            <div class="list">
              <h2>工作理念</h2>
              <ul>
                <li>我们公司的人喜欢做这一行</li>
                <li>我们会在当中找到乐趣</li>
                <li>我们使用更好的技术</li>
                <li>我们注重材料的选择</li>
                <li>我们有更好的服务</li>
                <li>我们重视工作的质量</li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <div class="container-fluid">
        <div class="row justify-content-md-center">
          <div class="col-lg-2 house" v-for="(key,val) in mid" :key="val">
            <span class="pic"><span :class="key.icon"></span></span>
            <h2>{{key.h2}}</h2>
            <p>{{key.ver}}</p>
            <a>{{key.p}}</a>
          </div>
        </div>
      </div>
      <div class="container-fluid">
        <div class="row justify-content-md-center" id="rows">
          <div class="col-lg-2 col-md-12" style="background-color: #ff9bc1">
            <div class="talk">
              <h2>练习快乐</h2>
              <p>在学习中，在劳动中，在科学中，在为人民的忘我服务中，你可以找到自己的幸福——捷连斯基</p>
              <p>正确的道路是这样：吸取你的前辈所做的一切，然后再往前走。——列夫·托尔斯泰</p>
              <p>将规范修炼成一个习惯，把认真内化成一种性格，用恒心转化为一种动力。</p>
              <a id="back"><span>更多意见</span></a>
            </div>
          </div>
          <div class="col-lg-2 col-md-4">
            <img src="img/3.png" class="card-img-top" alt="">
            <div class="card-body card-one">
              <p class="card-text">良好的就餐环境，舒适的灯光的照射，独立的就餐环境，有助于人放松心情，舒缓一天不愉快的事情，使人感到家的温暖。</p>
            </div>
          </div>
          <div class="col-lg-2 col-md-4">
            <div class="card-body card-two">
              <p class="card-text">客厅——一个与别人往来的重要的场所，而大大的落地窗增加了房屋的采光效果，在夜晚也可以通过窗户看外面的夜景。</p>
            </div>
            <img src="img/8.png" class="card-img-top" alt="">
          </div>
          <div class="col-lg-2 col-md-4">
            <img src="img/9.png" class="card-img-top" alt="">
            <div class="card-body card-three">
              <p class="card-text">卧室——私人的场所，布置成自己喜欢的模样，当然这张照片只是一张实例，我们会根据客户的需求来设计卧室的结构风格。</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'

export default {
  name: 'Home',
  components: {
    HelloWorld
  },
  data(){
    return {
        lun:[],
        nav:[],
        mid:[]
    }
  },
  mounted(){
    this.$axios('http://localhost:3000/home').then((data)=>{
      console.log(data);
      this.lun=JSON.parse(data.data[0].lun);
      this.nav=JSON.parse(data.data[0].nav);
      this.mid=JSON.parse(data.data[0].mid);
    })
  }
}
</script>

<style scoped lang="less">

  .ddv{background-color: #cec6c642;}
  .dd{display: flex;justify-content: center;}
  .card{border: none;width: 16rem;height: 100%}
  #row{padding-top: 7rem;}
  #rows{padding-bottom: 7rem;}
  .card-body{position: relative;background-color: #fff;}
  .nav{margin: 0;}
  .card-text:last-child {
    margin-bottom: 0;
    font-size: 1rem;
    line-height: 1.5rem;
    color: #5b5a5b;}
  .card-three::before{
    content: "";
    border: 16px solid transparent;
    border-right-color: #fff;
    position: absolute;
    bottom: 2.5rem;
    left: -1.8rem;
  }
  .house{
    background-color: #fff;
    margin: 10rem 0.5rem;
    display: flex;
    flex-flow: column;
    align-items: center;}
  .house p{font-size: 14px;
    color: #555;
    line-height: 1.8em;
    font-weight: 300;text-align: center}
  .house a{
    padding: 10px 15px;
    font-size: 15px;
    color: #FF9BC1;
    text-decoration: none;
    background: #f4f4f4;
    margin: 1rem;
  }
  .house a:hover{
    background-color: #D5467D;
    color: #fff;
  }
  .house p:before{
    content: "";
    position: absolute;
    top:0;right: 0;bottom: 0;left: 0;
    z-index: -1;
    transition-property: tranform;
    transition-duration: 0.3s;
    background: #d5467d;
  }
  .house p:hover:before{
    transform: scale(1);
  }
  .pic{width: 5rem;
    height: 5rem;
    display: flex;
    justify-content: center;
    background-color: #FF9BC1;
    border-radius: 50%;
    margin-top: -2rem;}

  .iconfont{line-height: 5rem;
    font-size: 1.7rem;
    color: #fff;
  }
  .house h2{color: #F56DA1;
    font-size: 1.4em;
    font-family: 'Raleway', sans-serif;
    text-transform: capitalize;
    font-weight: 300;margin: 1.5rem 0 1rem;}
  .list h2{font-size:24px;color: #fff;font-weight: 300;margin-bottom:1rem;margin-top: 2rem}
  .list ul{padding-left: 1.3rem;}
  .list ul li{font-size: 14px;color: #fff;margin: 1rem 0}
  .talk{padding: 1rem}
  .talk h2{color: #fff}
  .talk p{color: #fff}
  .talk a{background-color: #fff;color: #ff9bc1;border: none;padding: 0.5rem 0.7rem;}
  .talk a:hover{text-decoration: none;background-color: #D5467D;color: white;}
</style>
